<template>
  <el-card>

    <el-table
        v-loading="data.loading === true"
        :data="data.tableData"
        style="width: 100%; margin-top: 10px; overflow: hidden"
    >
      <el-table-column prop="id" label="序号" sortable min-width="80"></el-table-column>
      <el-table-column prop="method" label="请求方式" sortable min-width="100"></el-table-column>
      <el-table-column prop="url" label="请求URL" sortable min-width="100"></el-table-column>
      <el-table-column prop="content" label="错误信息"  min-width="400"></el-table-column>
      <el-table-column prop="ip" label="操作IP" sortable min-width="100"></el-table-column>
      <el-table-column prop="requestParams" label="参数"  min-width="150"></el-table-column>
      <el-table-column prop="logTime" label="操作时间" sortable min-width="110"></el-table-column>
    </el-table>
    <div v-if="data.total" style="margin-top: 10px">
      <el-pagination
          background
          small
          :page-size="data.pageSize"
          :current-page="data.pageNum"
          layout="total,prev, pager, next,jumper"
          :total="data.total"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </el-card>
</template>



<script setup>

import {onMounted, reactive} from "vue";
import {listErrorLogListApi} from "@/api/log";

const data=reactive({
  tableData:[],
  loading:false,
  total:0,
  pageNum:1,
  pageSize:10,
  keyword:'',
})

onMounted(()=>{
  getLoginLogList();

})
const getLoginLogList=()=>{
  data.loading=true;
  setTimeout(() => {
    data.loading = false;
  }, 1000);
  listErrorLogListApi({
    pageNum:data.pageNum,
    pageSize:data.pageSize,
    keyword:data.keyword,
  }).then(res=>{
    // console.log(res);
    data.tableData=res.data.list;
    data.tableData.forEach(item => {
      const timestampString = item.logTime;
      const timestamp = Number(timestampString);
      const date = new Date(timestamp);
      item.logTime=`${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
    });
    data.total=res.data.total;
    data.pageNum=res.data.pageNum;
    data.pageSize=res.data.pageSize;
  }).catch(err=>{
    console.log(err);
  })
}


const handleCurrentChange = (number) => {
  data.pageNum=number;
  getLoginLogList();
}
</script>
<style scoped>

</style>